
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Subnav w/ CSS &amp; jQuery</title>
<style type="text/css">
body {
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
h1 {
	font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
	color: #333;
	margin: 0;
	padding: 5px 0;
}
h1 small{
	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 1.5em;
	display: block;
	color: #fff;
}
.container {width: 970px; margin: 0 auto;}



ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 970px;
	list-style: none;
	position: relative;
	font-size: 1.2em;
	/*background: url(topnav_stretch.gif) repeat-x;*/
	background: #000000;


}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #555;
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
}
/*ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }*/
ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none;
	width: 970px;
	background: #1376c9;
	color: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
/*ul#topnav li:hover span { display: block; }*/
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>
<!-- <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> -->
<script type="text/javascript">
/*
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
	$(this).css({ 'background' : '#1376c9'}); //Add background color + image on hovered list item
	$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
	$(this).css({ 'background' : 'none'}); //Ditch the background
	$(this).find("span").hide(); //Hide the subnav
});

});
*/

</script>
</head>

<body>

<div class="container">
	<h1>Horizontal Subnav w/ CSS &amp; jQuery</h1>
	<div style="clear: both; display: block; padding-bottom: 20px;"><a href="http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/" style="color: #1376c9;">Horizontal Sub-nav with CSS &amp; jQuery</a> by Soh Tanaka. Check out his <a href="http://www.sohtanaka.com/web-design-blog/" style="color: #1376c9;">Web Design Blog</a> for more tutorials! - Nav inspired by the <a href="http://www.behance.net/" target="_blank">Behance Network</a></div>
    <ul id="topnav">
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">About</a>
            <span>
                <a href="#">The Company</a> |
                <a href="#">The Team</a> |
                <a href="#">Careers</a>
            </span>
        </li>
        <li>
            <a href="#">Services</a>
            <span>
                <a href="#">What We Do</a> |
                <a href="#">Our Process</a> |
                <a href="#">Testimonials</a>
            </span>
        </li>
        <li>
            <a href="#">Portfolio</a>
            <span>
                <a href="#">Web Design</a> |
                <a href="#">Development</a> |
                <a href="#">Identity</a> |
                <a href="#">SEO &amp; Internet Marketing</a> |
                <a href="#">Print Design</a>
            </span>
        </li>
        <li><a href="#">Contact</a></li>
    </ul>


</div>
<script type="text/javascript">
try {
	var all_li = document.getElementById("topnav").getElementsByTagName("li");
	for(var i=0;i<all_li.length;i++) {
		all_li[i].onmouseover = function() {
			if(this.getElementsByTagName("span")[0])
				this.getElementsByTagName("span")[0].style.display="block";
			this.style.background = '#1376c9';
		};
		all_li[i].onmouseout = function () {
			if(this.getElementsByTagName("span")[0])
				this.getElementsByTagName("span")[0].style.display="none";
			this.style.background = '';
		};

	}
}catch(e){}




</script>
</body>
</html>